<%--
    Document   : index
    Created on : Apr 30, 2013, 11:17:31 AM
    Author     : zulfadli
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <%--<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>--%>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $("a[rel^='prettyPhoto']").prettyPhoto({
                    social_tools: '',
                    allow_resize: false,
                    overlay_gallery: false
                });
            });

            function deletePicture(galleryId) {
                var url = '${pageContext.request.contextPath}/gallery?deletePicture&galleryId=' + galleryId;
                var answer = confirm("Are you sure to delete this picture?");
                if (answer) {
                    $.get(url, function(data) {
                        //$('#dialog-form').html(data);
                        document.location.reload(true);
                    });
                }

            }
        </script>
        <style type="text/css">
            .picture {
                -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
                box-shadow: 0 4px 8px rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <div id="page-title">
            <span class="title">Photo Gallery</span><label>&nbsp;</label><label>&nbsp;</label>
            <br>
        </div>
        <div id="mainContent" style="position: relative;">
            <div id="galleryLeftSide" style="width: 180px; float: left;">
                <%--<input type="button" value="Upload" />--%>
                <button class="btn" onclick="javscript: window.location = '${pageContext.request.contextPath}/gallery?upload'">Upload</button><br />
                <c:set var="curVes" value=""/>
                <c:set var="preVes" value=""/>
                <c:set var="curYear" value=""/>
                <c:set var="preYear" value=""/>
                <c:forEach items="${actionBean.galleryAll}" var="list" varStatus="lineList">
                    <c:set var="curVes" value="${list.vessel.vesselName}"/>
                    <c:if test="${list.vessel.vesselName ne preVes}">
                        ${list.vessel.vesselName}<br />
                        <c:forEach items="${actionBean.galleryAll}" var="list2" varStatus="lineList2">
                            <c:if test="${list2.vessel.vesselName eq curVes}">
                                <c:if test="${list2.year ne preYear}">
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <s:link href="${pageContext.request.contextPath}/gallery?showGallery&vessel=${list.vessel.vesselId}&year=${list2.year}">
                                        ${list2.year}
                                    </s:link><br />
                                    <c:set var="preYear" value="${list2.year}"/>
                                </c:if>
                            </c:if>
                        </c:forEach>
                    </c:if>
                    <c:set var="preVes" value="${list.vessel.vesselName}"/>
                    <c:set var="preYear" value=""/>
                </c:forEach>
                <%-- determine is admin --%>
                <c:forEach items="${actionBean.context.currentUser.roles}" var="i">
                    <c:choose>
                        <c:when test="${i.group.groupId eq '1'}">
                            <c:set var="ma" value="true"/>
                        </c:when>
                        <c:when test="${i.group.groupId eq '2'}">
                            <c:set var="superintendence" value="true"/>
                        </c:when>
                        <c:when test="${i.group.groupId eq '3'}">
                            <c:set var="admin" value="true"/>
                        </c:when>
                        <c:when test="${i.group.groupId eq '4'}">
                            <c:set var="coo" value="true"/>
                        </c:when>
                    </c:choose>

                </c:forEach>
            </div>
            <div id="galleryRightSide" style="float: left; width: 960px;">
                <c:choose>
                    <c:when test="${actionBean.gallery != null}">
                        <c:set var="gallery" value="${actionBean.gallery}" />
                    </c:when>
                    <c:otherwise>
                        <c:set var="gallery" value="${actionBean.randomGal}" />
                    </c:otherwise>
                </c:choose>
                <c:if test="${empty gallery}">No Picture to Display, Please Upload a Picture.</c:if>
                <c:if test="${actionBean.gallery != null}">
                    ${actionBean.gallery[0].vessel.vesselName} > ${actionBean.gallery[0].year}<br />
                </c:if>
                <c:forEach items="${gallery}" var="item" varStatus="line">
                    <%--<a href="javascript: void(0)" onclick="window.open('gallery?image&galleryId=${item.galleryId}','windowname1','width=500, height=500');return false;" title="${item.caption}">--%>
                    <div style="float: left; margin-right: 10px; text-align: center;">
                        <a href="gallery?image&galleryId=${item.galleryId}" rel="prettyPhoto[gallery1]" title="${item.caption}">
                            <img class="picture" src="gallery?image&galleryId=${item.galleryId}" width="100" height="100" title="${item.filename}" />
                        </a><br />
                        <c:if test="${actionBean.context.currentUser.userId eq item.uploadedBy or admin}">
                            <%--<a href="#" onclick="deletePicture('${item.galleryId}')">Delete</a>--%>
                            <img alt='Click for Delete' border='0' src='${pageContext.request.contextPath}/images/icon/gnome_edit_delete.png'
                                 width="20" height="20" title="Delete this picture" onclick="deletePicture('${item.galleryId}')" onmouseover="this.style.cursor = 'pointer';">
                        </c:if>
                            <br/>
                    </div>&nbsp;
                </c:forEach>
            </div>
        </div>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $("a[rel^='prettyPhoto']").prettyPhoto();
            });
        </script>

    </body>
</html>
